<section id="navigation">
    <h2 class="page-header">Navigation</h2>
    <div class="row">
        <div class="span3">
            <div class="well" style="padding: 8px 0;">
                <ul class="nav nav-list">
                    <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i>Home</a></li>
                    <li><a href="#"><i class="icon-fixed-width icon-book"></i>Library</a></li>
                    <li><a href="#"><i class="icon-fixed-width icon-pencil"></i>Applications</a></li>
                    <li><a href="#"><i class="icon-fixed-width icon-cogs"></i>Settings</a></li>
                </ul>
            </div>
        </div>
        <div class="span9">
            <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p>
            {% highlight html %}
            <ul class="nav nav-list">
                <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i>Home</a></li>
                <li><a href="#"><i class="icon-fixed-width icon-book"></i>Library</a></li>
                <li><a href="#"><i class="icon-fixed-width icon-pencil"></i>Applications</a></li>
                <li><a href="#"><i class="icon-fixed-width icon-cogs"></i>Settings</a></li>
            </ul>
            {% endhighlight %}
        </div>
    </div>
</section>